<template>
    <div style="margin-left:20px;">
        <el-row>
            <el-col :span="24">
                <el-container  style="background-color: #FCFCFC;">
                    <el-form ref="form" :model="form" label-width="80px" style="width:100%">
                        <el-row>
                            <el-col :span = "22">
                                <el-form-item label="线索名称" prop="clueName">
                                    <span style="color:#333333;">{{form.clueName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span = "1">
                                <div style="float:right;">
                                    <el-button
                                        type="primary"
                                        plain
                                        icon="el-icon-sort"
                                        size="mini"
                                        @click="clueToCustomer"
                                        v-hasPermi="['crm:customer:add']"
                                        >
                                        转客户
                                    </el-button>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span = "6">
                                <el-form-item label="线索来源" prop="clueSource">
                                    <span style="color:#333333;">{{form.clueSource}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span = "6">
                                <el-form-item label="联系人" prop="clueContacts">
                                    <span style="color:#333333;">{{form.clueContacts}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span = "6">
                                <el-form-item label="电话" prop="tel">
                                    <span style="color:#333333;">{{form.tel}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span = "6">
                                <el-form-item label="负责人" prop="clueLeaderName">
                                    <span style="color:#333333;">{{form.clueLeaderName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span = "6">
                                <el-form-item label="创建时间" prop="createTime">
                                    {{ parseTime(form.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-form-item label="附件" prop="annex">
                            <el-link :href="form.annex" style="color:#1890ff" target="_blank">{{form.annex}}</el-link>
                        </el-form-item>
                    </el-form>
                </el-container>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="18">
                <el-tabs style="height: 200px;">
                    <el-tab-pane label="活动">
                        <el-button
                            type="primary"
                            plain
                            icon="el-icon-plus"
                            size="mini"
                            @click="handleAddActivity"
                            v-hasPermi="['crm:activity:add']"
                            >
                            新增跟进
                        </el-button>
                        <el-scrollbar :style="this.sjzStyle">
                            <div class="block" style="margin-top:20px;">
                                <el-timeline style="margin-left:-30px;">
                                    <el-timeline-item placement="top"
                                        v-for="(activity, index) in activityList"
                                        :timestamp="activity.updateTime"
                                        :key="index"
                                        >
                                        <el-card>
                                            <h4>{{activity.createByName}} {{activity.category}} 拜访</h4>
                                            <p v-html="activity.content"></p>
                                            <el-row>
                                                <span style="float:left;">
                                                    <fileUploadDetail v-model="activity.annex"/>
                                                </span>
                                            </el-row>
                                            <el-row>
                                                <span style="float:left;">下次拜访时间：{{ parseTime(activity.nextTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                                            </el-row>
                                            <span style="float:right;width:65px;margin-bottom:5px;cursor:pointer;">
                                                <el-tag v-if="activity.status == 0" type="warning" @click="activityEdit(activity)">编辑</el-tag>
                                            </span>
                                            <span style="float:right;width:65px;margin-bottom:5px;">
                                                <el-tag v-if="activity.status == 1" type="success">已拜访</el-tag>
                                                <el-tag v-if="activity.status == 0" type="danger">未拜访</el-tag>
                                            </span>
                                        </el-card>
                                    </el-timeline-item>
                                </el-timeline>
                            </div>
                        </el-scrollbar>
                    </el-tab-pane>
                    <el-tab-pane label="详细信息">
                        <el-collapse v-model="activeNames">
                            <el-collapse-item title="基本信息" name="1">
                                <el-form ref="form" :model="form" label-width="100px">
                                    <el-row>
                                        <el-col :span = "8">
                                            <el-form-item label="线索名称" prop="clueName">
                                                <span>{{form.clueName}}</span>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span = "8">
                                            <el-form-item label="线索来源" prop="clueSource">
                                                <span>{{form.clueSource}}</span>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span = "8">
                                            <el-form-item label="行业" prop="trade">
                                                <span>{{form.trade}}</span>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-form-item label="描述" prop="remark">
                                        <span>{{form.remark}}</span>
                                    </el-form-item>
                                    <el-row>
                                        <el-col :span = "8">
                                            <el-form-item label="地址" prop="address">
                                                <span>{{form.address}}</span>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span = "8">
                                            <el-form-item label="联系人" prop="mail">
                                                <span>{{form.clueContacts}}</span>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span = "8">
                                            <el-form-item label="电话" prop="tel">
                                                <span>{{form.tel}}</span>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span = "8">
                                            <el-form-item label="邮箱" prop="mail">
                                                <span>{{form.mail}}</span>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span = "8">
                                            <el-form-item label="线索级别" prop="clueLevel">
                                                <span>{{form.clueLevel}}</span>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span = "8">
                                            <el-form-item label="下次联系时间" prop="clueLeader">
                                                <span>{{ parseTime(form.nextTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                </el-form>
                            </el-collapse-item>
                            <el-collapse-item title="系统信息" name="2">
                                <el-form ref="form" :model="form" label-width="100px">
                                    <el-row>
                                        <el-col :span = "8">
                                            <el-form-item label="负责人" prop="clueLeaderName">
                                                <span>{{form.clueLeaderName}}</span>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span = "8">
                                            <el-form-item label="创建人" prop="createByName">
                                                <span>{{form.createByName}}</span>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span = "8">
                                            <el-form-item label="创建时间" prop="createTime">
                                                <span>{{ parseTime(form.createTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-row>
                                        <el-col :span = "8">
                                            <el-form-item label="更新人" prop="updateByName">
                                                <span>{{form.updateByName}}</span>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span = "8">
                                            <el-form-item label="更新时间" prop="updateTime">
                                                <span>{{ parseTime(form.updateTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :span = "8">
                                            <el-form-item label="最后跟进时间" prop="lastTime">
                                                <span>{{ parseTime(form.lastTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                                            </el-form-item>
                                        </el-col>
                                    </el-row>
                                    <el-form-item label="最后跟进记录" prop="lastCon">
                                        <span v-html="form.lastCon"></span>
                                    </el-form-item>
                                </el-form>
                            </el-collapse-item>
                        </el-collapse>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
            <el-col :span="6">
                <el-tabs style="height: 200px;margin-left:30px;">
                    <el-tab-pane label="重要信息">
                        <el-form ref="form" :model="form" label-width="100px">
                            <el-form-item label="线索名称" prop="clueName">
                                <span>{{form.clueName}}</span>
                            </el-form-item>
                            <el-form-item label="行业" prop="trade">
                                <span>{{form.trade}}</span>
                            </el-form-item>
                            <el-form-item label="地址" prop="address">
                                <span>{{form.address}}</span>
                            </el-form-item>
                            <el-form-item label="联系人" prop="tel">
                                <span>{{form.clueContacts}}</span>
                            </el-form-item>
                            <el-form-item label="电话" prop="tel">
                                <span>{{form.tel}}</span>
                            </el-form-item>
                            <el-form-item label="线索级别" prop="clueLevel">
                                <span>{{form.clueLevel}}</span>
                            </el-form-item>
                            <el-form-item label="负责人" prop="clueLeaderName">
                                <span>{{form.clueLeaderName}}</span>
                            </el-form-item>
                            <el-form-item label="下次联系时间" prop="nextTime">
                                <span>{{ parseTime(form.nextTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                            </el-form-item>
                            <el-form-item label="最后跟进时间" prop="lastTime">
                                <span>{{ parseTime(form.lastTime, '{y}-{m}-{d} {h}:{i}:{s}') }}</span>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>

        <!-- 添加或修改crm活动表对话框 -->
        <el-dialog :title="activityTitle" :visible.sync="open" width="50%" append-to-body>
            <activityForm 
                :businessId = "this.businessId" 
                :activityType = "this.activityType"
                :type = "this.type"
                :isNewTime = "this.isNewTime"
                :activityFormEdit = "this.activityFormEdit"
                :isNewTimeUpdate = "this.isNewTimeUpdate"
                @activityFormClose="activityFormClose" 
                @getListActivity = "getListActivity"></activityForm>
        </el-dialog>
    </div>
</template>




<script>
import { listClue, getClue, delClue, addClue, updateClue, exportClue, clueToCustomer } from "@/api/crm/sale/clue";
import { listActivity, getActivity, delActivity, addActivity, updateActivity, exportActivity } from "@/api/crm/activity/activity";
import FileUpload from '@/components/FileUpload';
import FileUploadDetail from '@/components/FileUploadDetail';

import activityForm from '../activity/activityForm'

export default {
    props: {
        form: {}
    },
    name: "Clue",
    components: {
        activityForm,
        FileUpload,
        FileUploadDetail
    },
    data() {
        return {
            //时间轴高度
            sjzStyle: "height:" + document.documentElement.clientHeight / 1.5 + "px", //实时屏幕高度
            //时间轴排序
            reverse: true,
            activeNames: ['1','2'],
            // 活动表表格数据
            activityList: [],
            activityTitle: "新增跟进",
            // 是否显示弹出层
            open: false,
            // 活动表表单参数
            activityForm: {},
            // 活动表表单参数-用于编辑
            activityFormEdit: {},
            // 活动表表单参数-业务id
            businessId: "",
            //判断是否新增按钮，随机生成时间戳，进行判断
            isNewTime: new Date(),
            //判断是否跟进编辑按钮，随机生成时间戳，进行判断
            isNewTimeUpdate: new Date(),
            // 活动表表单参数-活动类型 线索、客户、商机
            activityType: "",
            //活动类型 1 跟进 2 任务
            type: 1,
            // 表单校验
            rules: {
                
            }
        };
    },
    created() {
        
    },
    methods: {
        /** 转客户 */
        clueToCustomer(){
            if(this.form.isCustomer === 1){
                this.$alert("此线索已转为客户，请勿重复操作", "提示", { confirmButtonText: "确定", });
            }else{
                let _this = this;
                this.$confirm('是否确认将此线索转为客户?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function() {
                    clueToCustomer(_this.form.id).then(response => {
                        _this.form.isCustomer = 1;
                        _this.msgSuccess("转客户成功");
                    });
                })
            }
        },
        /** 新增按钮操作 */
        handleAddActivity() {
            this.isNewTime = new Date() + Math.round(Math.random()*50000);
            this.businessId = this.form.id;
            this.activityType = "1";
            this.type = 1;
            this.open = true;
            this.activityTitle = "新增跟进";
        },
        /** 关闭跟进框 */
        activityFormClose() {
            this.open = false;
        },
        /** 查询跟进列表-时间轴 */
        getListActivity(){
            var queryParam = {businessId: this.businessId, activityType: 1};
            listActivity(queryParam).then(response => {
                this.activityList = response.rows;
            });
        },
        /** 编辑跟进记录 */
        activityEdit(row){
            this.type = 1;
            this.isNewTimeUpdate = new Date() + Math.round(Math.random()*50000);
            this.activityFormEdit = row;
            this.open = true;
        }
    },
    watch: {
        form: {
        　　handler(newName, oldName) {
        　　    if(null != newName.id){
                    var queryParam = {businessId: newName.id, activityType: 1};
                    listActivity(queryParam).then(response => {
                        this.activityList = response.rows;
                    });
                }
        　　},
            deep: true,
        　　immediate: true
        }
    } 
};
</script>